<template>
  <view class="login">
    <view class="logo-area">
      <text class="logo-name">XXX系统</text>
    </view>
    <view class="form-area">
      <u-form ref="uForm" :model="form" :rules="rules" labelPosition="left">
        <u-form-item label="账号" prop="mobile">
          <u-input class="form-input" :customStyle="inputStyle" type="text" :maxlength="30" v-model="form.mobile" clearable
          placeholder="请输入账号" border="surround" shape="circle"></u-input>
        </u-form-item>
        <u-form-item label="密码" prop="password">
          <u-input class="form-input" :customStyle="inputStyle" type="password" :maxlength="30" v-model="form.password" password clearable
          placeholder="请输入密码" border="surround" shape="circle"></u-input>
        </u-form-item>
      </u-form>
      <view class="check-item">
        <u-checkbox-group v-model="remember">
          <u-checkbox label="记住密码" :name="true"></u-checkbox>
        </u-checkbox-group>
      </view>
      <u-button type="primary" throttle-time="2000" shape="circle" text="登录" @click="handleSubmit">
        <view class="login-button">登录</view>
      </u-button>
    </view>
  </view>
</template>

<script>
import { storage } from '@/utils/storage';
import { sharedParameterAnalysis } from '@/utils/tool';

export default{
  name:"Login",
  data(){
    return{
      inputStyle: { border: '1rpx solid rgb(218, 219, 222)'},
      remember: [true],
      loading: false,
      rules: {},
      form: {
        mobile: '',
        password: ''
      }
    }
  },
  methods:{
    checkForm() {
      if(!this.form.mobile) {
        this.$showToast('请输入账号')
        return false
      }
      if(!this.form.password) {
        this.$showToast('请输入密码')
        return false
      }
      return true;
    },
    async handleSubmit() {
      // TODO： 登录接口
      if(this.loading) { return; }
      this.loading = true
      // if(!this.checkForm()) { return; }
      // let { c, d, m } = await this.$api.login(this.form)
      // if(c != 200) {
      //   this.loading = false
      //   this.$showToast(m)
      //   return
      // }
      // storage.set('token', d.authorized)
      // storage.set('loginOutInfo', this.form)
      // if(this.remember.length > 0) {
      //   storage.set('remember', '1')
      // } else {
      //   storage.remove('remember')
      // }
      this.$showToast('登录成功')
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }, 1200)
    },
    checkInfo() {
      let token = storage.get('token')
      let loginOutInfo = storage.get('loginOutInfo')
      let remember = storage.get('remember')
      if(token && remember) {
        this.loading = true
        this.$showToast('自动登录中...')
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }, 900)
      }
      if(loginOutInfo) {
        this.form = {
          mobile: loginOutInfo.mobile || '',
          password: loginOutInfo.password || '',
        }
      }
    }
  },
  onShow() {
    this.loading = false
    // TODO: 自动登录
    // this.checkInfo()
  },
  async onLoad(options) {
    // 小程序分享或二维码页面跳转
    /** #ifdef MP-WEIXIN */
    if(Object.keys(options).length > 0) {
      sharedParameterAnalysis(options)
    }
    /** #endif */
  }
}
</script>

<style lang="scss">
.login {
  .form-area {
    .u-button {
      border: none !important;
      width: 80% !important;
      height: 50px !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.login {
  height: 100%;
	display: flex;
	flex-direction: column;
  align-items: center;
	padding: 0.5rem;
  .logo-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    .logo-name {
      width: 100%;
      text-align: center;
      letter-spacing: 0.2rem;
      font-size: 1.35rem ;
      line-height: 8rem;
      font-weight: 600;
    }
  }
  .form-area {
    width: 90%;
    .check-item {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 0.5rem;
      margin-bottom: 5rem;
    }
    .login-button {
      font-size: 34rpx;
      margin-left: 1rem;
      letter-spacing: 1rem;
    }
  }
}
</style>
